<template>
  <section class="zui-container" :class="{ 'is-vertical': isVertical }">
    <slot></slot>
  </section>
</template>

<script>
export default {
  name: 'z-container',

  props: {
    direction: String
  },

  computed: {
    isVertical () {
      if (this.direction === 'vertical') {
        return true
      } else if (this.direction === 'horizontal') {
        return false
      }
      return this.$slots && this.$slots.default
        ? this.$slots.default.some(vnode => {
          const tag = vnode.componentOptions && vnode.componentOptions.tag
          return tag === 'z-header' || tag === 'z-footer'
        })
        : false
    }
  }
}
</script>

<style lang="less">
.zui-container {
  flex: auto;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  height: 100%;
  box-sizing: border-box;
  min-width: 0;

  &.is-vertical {
    flex-direction: column;
  }
}
</style>
